<template>
  <div class="container-fluid tag">
    <div class="main">
      <div class="form_curr" style="width: 370px" v-loading="dataLoading">
        <div style="padding-left: 10px;margin-bottom: 20px">
          <input
              accept="image/png"
              type="file"
              style="display: none"
              @change="selectedFile"
              ref="uploadFile"/>
          <el-avatar id="avatar" :size="50" :src="circleUrl" @click="uploadFile.click()">
          </el-avatar>
        </div>
        <div class="item">
          <span>用户名</span>
          <input type="text"
                 maxlength="20"
                 v-model="user.name"
                 v-bind:class="{ at : activity }"
                 @focusin="activity = true"
                 @focusout="activity = false"
                 @mouseenter="alter=true"
                 @mouseout="alter=false"
                 class="input">
          <svg v-show="alter" x="1685545022996" class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="16" height="16">
            <path d="M927.288889 244.622222l-142.222222-147.911111c-51.2-51.2-142.222222-51.2-193.422223 0l-506.311111 506.311111c-17.066667 17.066667-28.444444 39.822222-28.444444 62.577778v233.244444c0 45.511111 22.755556 68.266667 68.266667 68.266667h233.244444c22.755556 0 45.511111-11.377778 62.577778-28.444444l500.622222-506.311111c56.888889-51.2 56.888889-136.533333 5.688889-187.733334zM352.711111 893.155556h-227.555555v-221.866667-11.377778c0 5.688889 5.688889 11.377778 5.688888 11.377778L341.333333 881.777778c5.688889 5.688889 11.377778 5.688889 11.377778 5.688889 5.688889 5.688889 5.688889 5.688889 0 5.688889z m51.2-34.133334c0-5.688889-5.688889-17.066667-11.377778-22.755555L182.044444 625.777778c-5.688889-5.688889-11.377778-11.377778-22.755555-11.377778l341.333333-341.333333 244.622222 244.622222-341.333333 341.333333z m472.177778-472.177778L796.444444 466.488889 551.822222 221.866667l79.644445-79.644445c28.444444-28.444444 68.266667-28.444444 96.711111 0l142.222222 147.911111c34.133333 28.444444 34.133333 68.266667 5.688889 96.711111z" fill="#999999">

          </path></svg>
        </div>
        <div class="item">
          <span>密&nbsp;&nbsp;&nbsp;&nbsp;码</span>
          <input type="password"
                 maxlength="20"
                 v-model="user.password"
                 v-bind:class="{ at : activity_d }"
                 @focusin="activity_d = true"
                 @focusout="activity_d = false"
                 @mouseenter="alter_d=true"
                 @mouseout="alter_d=false"
                 class="input">
          <svg v-show="alter_d" x="1685545022996" class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="16" height="16">
            <path d="M927.288889 244.622222l-142.222222-147.911111c-51.2-51.2-142.222222-51.2-193.422223 0l-506.311111 506.311111c-17.066667 17.066667-28.444444 39.822222-28.444444 62.577778v233.244444c0 45.511111 22.755556 68.266667 68.266667 68.266667h233.244444c22.755556 0 45.511111-11.377778 62.577778-28.444444l500.622222-506.311111c56.888889-51.2 56.888889-136.533333 5.688889-187.733334zM352.711111 893.155556h-227.555555v-221.866667-11.377778c0 5.688889 5.688889 11.377778 5.688888 11.377778L341.333333 881.777778c5.688889 5.688889 11.377778 5.688889 11.377778 5.688889 5.688889 5.688889 5.688889 5.688889 0 5.688889z m51.2-34.133334c0-5.688889-5.688889-17.066667-11.377778-22.755555L182.044444 625.777778c-5.688889-5.688889-11.377778-11.377778-22.755555-11.377778l341.333333-341.333333 244.622222 244.622222-341.333333 341.333333z m472.177778-472.177778L796.444444 466.488889 551.822222 221.866667l79.644445-79.644445c28.444444-28.444444 68.266667-28.444444 96.711111 0l142.222222 147.911111c34.133333 28.444444 34.133333 68.266667 5.688889 96.711111z" fill="#999999">

            </path></svg>
        </div>
        <div class="item">
          <span>电&nbsp;&nbsp;&nbsp;&nbsp;话</span>
          <input type="text"
                 maxlength="20"
                 v-model="user.phone"
                 v-bind:class="{ at : activity_p }"
                 @focusin="activity_p = true"
                 @focusout="activity_p = false"
                 @mouseenter="alter_p=true"
                 @mouseout="alter_p=false"
                 class="input">
          <svg v-show="alter_p" x="1685545022996" class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="16" height="16">
            <path d="M927.288889 244.622222l-142.222222-147.911111c-51.2-51.2-142.222222-51.2-193.422223 0l-506.311111 506.311111c-17.066667 17.066667-28.444444 39.822222-28.444444 62.577778v233.244444c0 45.511111 22.755556 68.266667 68.266667 68.266667h233.244444c22.755556 0 45.511111-11.377778 62.577778-28.444444l500.622222-506.311111c56.888889-51.2 56.888889-136.533333 5.688889-187.733334zM352.711111 893.155556h-227.555555v-221.866667-11.377778c0 5.688889 5.688889 11.377778 5.688888 11.377778L341.333333 881.777778c5.688889 5.688889 11.377778 5.688889 11.377778 5.688889 5.688889 5.688889 5.688889 5.688889 0 5.688889z m51.2-34.133334c0-5.688889-5.688889-17.066667-11.377778-22.755555L182.044444 625.777778c-5.688889-5.688889-11.377778-11.377778-22.755555-11.377778l341.333333-341.333333 244.622222 244.622222-341.333333 341.333333z m472.177778-472.177778L796.444444 466.488889 551.822222 221.866667l79.644445-79.644445c28.444444-28.444444 68.266667-28.444444 96.711111 0l142.222222 147.911111c34.133333 28.444444 34.133333 68.266667 5.688889 96.711111z" fill="#999999">

            </path></svg>
        </div>
        <div class="item">
          <span>邮&nbsp;&nbsp;&nbsp;&nbsp;箱</span>
          <input type="text"
                 maxlength="20"
                 v-model="user.email"
                 v-bind:class="{ at : activity_e }"
                 @focusin="activity_e = true"
                 @focusout="activity_e = false"
                 @mouseenter="alter_e=true"
                 @mouseout="alter_e=false"
                 class="input">
          <svg v-show="alter_e" x="1685545022996" class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="16" height="16">
            <path d="M927.288889 244.622222l-142.222222-147.911111c-51.2-51.2-142.222222-51.2-193.422223 0l-506.311111 506.311111c-17.066667 17.066667-28.444444 39.822222-28.444444 62.577778v233.244444c0 45.511111 22.755556 68.266667 68.266667 68.266667h233.244444c22.755556 0 45.511111-11.377778 62.577778-28.444444l500.622222-506.311111c56.888889-51.2 56.888889-136.533333 5.688889-187.733334zM352.711111 893.155556h-227.555555v-221.866667-11.377778c0 5.688889 5.688889 11.377778 5.688888 11.377778L341.333333 881.777778c5.688889 5.688889 11.377778 5.688889 11.377778 5.688889 5.688889 5.688889 5.688889 5.688889 0 5.688889z m51.2-34.133334c0-5.688889-5.688889-17.066667-11.377778-22.755555L182.044444 625.777778c-5.688889-5.688889-11.377778-11.377778-22.755555-11.377778l341.333333-341.333333 244.622222 244.622222-341.333333 341.333333z m472.177778-472.177778L796.444444 466.488889 551.822222 221.866667l79.644445-79.644445c28.444444-28.444444 68.266667-28.444444 96.711111 0l142.222222 147.911111c34.133333 28.444444 34.133333 68.266667 5.688889 96.711111z" fill="#999999">

            </path></svg>
        </div>
        <div class="item">
          <el-button type="primary" @click="save">保存</el-button>
          <el-button type="warning" @click="reset">取消</el-button>
        </div>
      </div>
    </div>

  </div>

</template>

<script setup>
import {useStore} from "vuex";
import {nextTick, reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import axios from "axios";
import qs from "qs"
import constant from "../constant";


const store = useStore()
const uploadFile = ref(null)
let baseUrl = store.state.baseUrl
let userTemp = {...store.state.user}

let user = ref(userTemp)

let activity = ref(false)
let activity_e = ref(false)
let activity_p = ref(false)
let activity_d = ref(false)

let alter = ref(false)
let alter_e = ref(false)
let alter_p = ref(false)
let alter_d = ref(false)

let dataLoading = ref(false)

let circleUrl = user.value.image === '' ? baseUrl + '/image/avate.png' : baseUrl + user.value.image
// 保存
function save() {
  const userStr = JSON.stringify(user.value)
  const storeStr = JSON.stringify(store.state.user)
  if (userStr === storeStr) {
    ElMessage.warning("不需要修改")
    return
  }
  dataLoading.value = true
  if (user.value.name === '' || user.value.password === '') {
    ElMessage.warning("输入用户名或密码")
  } else {
    axios.post("/api/alter", qs.stringify(user.value))
      .then((res) => {
        if (res.status === constant.ResponseCode.FAILED) {
          ElMessage.warning("保存失败")
        } else if (res.status === constant.ResponseCode.SUCCESS) {
          ElMessage.success("保存成功")
          store.state.user = {...user.value}
        }
      })
      .catch((exception) => {
        ElMessage.error(exception)
        console.log(exception)
      })
      .finally(() => {
        dataLoading.value = false
      })
  }
}

// 取消按钮
function reset() {
  const userStr = JSON.stringify(user.value)
  const storeStr = JSON.stringify(store.state.user)
  if (userStr !== storeStr) {
    user.value = {...store.state.user}
  }
  console.log("user===" ,user.value)
  console.log("store===" , store.state.user)
}

// 打开文件上传
function selectedFile(e) {
  const file = e.target.files[0]
  let fd = new FormData()
  fd.append('file', file)
  axios.post("/api/avatar", fd, {
    'Content-type' : 'multipart/form-data'
  }).then((res) => {
    if (res.status === constant.ResponseCode.FAILED) {
      ElMessage.error('failed')
    } else if (res.status === constant.ResponseCode.SUCCESS){
      store.state.user.image = res.data
      user.value = {...store.state.user}
      ElMessage.success('更换头像成功')
    } else if (constant.ResponseCode.SERVICE_ERROR){
      ElMessage.success("服务器错误")
      console.log("===",res.data)
    }
  })
}


</script>

<style scoped>
.input{
  list-style: none;
  margin: 10px 0 10px 0;
  font-family: 'Microsoft YaHei',Arial,sans-serif;
  width: 170px;
  padding: 0 10px;
  height: 36px;
  line-height: 36px;
  outline: 0;
  border: 0;
  font-size: 14px;

  /*color: #ccc;*/
}
.input.at {
  border: 1px solid #ddd;
  border-radius: 2px;
}
.form_curr {
  height: 400px;
  align-items: center;
  justify-items: center;
  justify-content: center;
  padding-top: 20px;
  border-radius: 10px;
  box-shadow: 0 1px 12px 11px rgb(137 47 47 / 12%);
  background-color: #FFFFFF;

}
.main {
  margin-top: 100px;
  display: flex;
  justify-items: center;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /*background-image: url("//file.40017.cn/appresource/image/pc/redpackCenter/pc_default_banner01.jpg");*/

}
#try {
  margin: 0;
}

.item {
  align-items: center;
  justify-content: right;
}
.item span {
  margin-left: 100px;
  margin-right: 10px;
}
.item svg {
  position: relative;
  top: 3px;
  right: 20px;
  z-index: 1;
}
.tag {
  height: 800px;
  background-image: url("../../public/1.jpg");
}
input[type=file] {
  display: none;
}
#avatar:hover {
  cursor: pointer;
}
</style>

<style module>

</style>